<template>
  <div class="coordinate-block">
    <div class="coordinate-level">级别: {{level}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
@Component({
  mixins: [MapCommon],
})
export default class Level extends Vue {
  private level: string = '41';

  private mounted() {
    (this as any).resolveMap('map').then((data: any) => {
      this.getComponent().on('levelChanged', this.showLevel, this);
    });
  }

  private beforeDestroy() {
  this.getComponent().on('levelChanged', this.showLevel, this);
  }
  private showLevel(event: any) {
    this.level = event.level;
  }

  private getComponent() {
    let gisToolComponent = null;
    const temp: any = this;
    const GISComponents = temp.$ioc.resolve('GISModules-map');
    gisToolComponent = GISComponents.common.getComponent('GISToolComponent');
    gisToolComponent.load();
    this.level = gisToolComponent.getCurrentLevel();
    return gisToolComponent;
  }
}
</script>

<style lang="less" scoped>
.coordinate-block {
  .coordinate-level{
    width: 100px;
    height: 18px;
    line-height: 18px;
    position: absolute;
    color: #dfdfdf;
    border: 1px solid #eee;
    border-top: none;
    background: rgba(0,60,136,.5);
    font-size: 10px;
    text-align: center;
    margin: 1px;
    will-change: contents, width;
    left: 150px;
    bottom: 5px;
  }
}
</style>